<template>
	<up-popup v-model:show="dialogVisible" @close="cancelUpload" mode="center" round="8"
		:custom-style="{ zIndex: 9999999 }">
		<view class="uploadPopup">
			<view class="popupTitle">上传保单文件</view>
			<view class="uploadTip">请选择PDF格式的保单文件进行上传</view>
			<!-- 上传 -->
			<u-upload :fileList="fileList" @afterRead="handleFileUpload" @delete="handleFileDelete" name="files"
				:multiple="true" accept="application/pdf" :maxCount="5" :maxSize="10 * 1024 * 1024" :previewFullImage="false"
				width="100%" height="200rpx">
				<view class="uploadArea">
					<u-icon name="plus" size="40" color="#ccc"></u-icon>
					<text class="uploadText">点击选择PDF文件</text>
					<text class="uploadSubText">支持多个文件，单个文件不超过10MB</text>
				</view>
			</u-upload>
			<!-- 底部按钮 -->
			<view class="buttonGroup">
				<button @click="cancelUpload">取消</button>
				<button @click="confirmUpload">确认上传</button>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
import { toRefs, ref, computed } from 'vue';

const props = defineProps({
	// popup显示隐藏
	uploadPopupShow: {
		type: Boolean,
		default: false
	}
});
const { uploadPopupShow } = toRefs(props);
const emit = defineEmits(['update:uploadPopupShow']);

// 使用计算属性建立双向绑定
const dialogVisible = computed({
	get: () => uploadPopupShow.value,
	set: (val) => emit('update:uploadPopupShow', val)
});

// 上传相关状态
const fileList = ref([]);

// 处理文件删除
const handleFileDelete = (index) => {
	fileList.value.splice(index, 1);
}

// 处理文件上传
const handleFileUpload = (lists) => {
	console.log('上传的文件:', lists);
	fileList.value = [...lists];
}

// 确认上传
const confirmUpload = () => {
	if (fileList.value.length === 0) {
		uni.showToast({
			title: '请选择要上传的PDF文件',
			icon: 'none'
		});
		return;
	}

	// 这里可以调用上传API
	uni.showToast({
		title: '上传成功',
		icon: 'success'
	});
	cancelUpload();
}

// 取消上传
const cancelUpload = () => {
	emit('update:uploadPopupShow', false);
	fileList.value = [];
}
</script>

<style lang='scss' scoped>
// 上传弹窗样式
.uploadPopup {
	width: 75vw;
	display: flex;
	align-items: center;
	padding: 32rpx 32rpx 0;
	flex-direction: column;

	.popupTitle {
		color: #333;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		margin-bottom: 16rpx;
	}

	.uploadTip {
		color: #666;
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 40rpx;
	}

	// 上传模块
	.uploadArea {
		display: flex;
		height: 200rpx;
		align-items: center;
		margin-bottom: 40rpx;
		border-radius: 16rpx;
		flex-direction: column;
		justify-content: center;
		border: 2rpx dashed #ddd;
		background-color: #fafafa;

		.uploadText {
			color: #333;
			font-size: 28rpx;
			margin: 16rpx 8rpx;
		}

		.uploadSubText {
			color: #999;
			font-size: 22rpx;
		}
	}

	// 底部按钮
	.buttonGroup {
		gap: 20rpx;
		width: 100%;
		display: flex;

		button {
			font-weight: normal;
			width: calc(50% - 10rpx);

			&:last-child {
				color: #FFF;
				background-color: #0D6FFF;
			}
		}
	}
}
</style>